<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="(item,index) in userType" :key="index" :label="item" :name="item">
      <el-table :data="pageData.usersData" height="250" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="account" label="账号" width="180"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="idcard" label="身份认证">
          <template slot-scope="scope">
            <span v-if="scope.row.idcard=='' " style="color:red">未实名</span>
            <span v-else style="color:green">已实名</span>
          </template>
        </el-table-column>
        <el-table-column prop="idcard" label="车主审核">
          <template slot-scope="scope">
            <span v-if="scope.row.lessor=='0' " style="color:black">未审核</span>
            <span v-else-if="scope.row.lessor=='1'" style="color:green">待审核</span>
            <span v-else-if="scope.row.lessor=='2'" style="color:green">审核通过</span>
            <span v-else-if="scope.row.lessor=='3'" style="color:red">审核未通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="wxid" label="微信账号"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="tabClick(scope.row._id)" type="text" size="small">去审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination></pagination>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "usersList"
);
import pagination from "@/components/users/pagination";
export default {
  data() {
    return {
      activeName: "全部用户", //默认选中第一个
      userType: ["全部用户", "待审核", "未实名"]
    };
  },
  components: {
    pagination
  },
  computed: {
    ...mapState(["pageData"]) //从状态机获取数据
    // userList(){
    //     let users = this.pageData.usersData;
    //     if(this.pageData.usersData.length>0){
    //         for(var i = 0;i<users.length;i++){
    //             if(users[i].idcard==""){
    //                 users[i].idcard="未实名"
    //             }else{
    //                 users[i].idcard="已实名"
    //             }
    //         }
    //     }
    //     return users;
    // }
  },
  mounted() {
    this.getAllUsersAsync();
  },
  methods: {
    ...mapActions([
      "getAllUsersAsync",
      "getUnnamedUsersAsync",
      "getUnpassUsersAsync"
    ]),
    handleClick(tab, event, row) {
      console.log(tab.$options.propsData.label);
      switch (tab.$options.propsData.label) {
        case "全部用户":
          this.getAllUsersAsync();
          break;
        case "未实名":
          this.getUnnamedUsersAsync();
          break;
        case "待审核":
          this.getUnpassUsersAsync();
          break;
      }
    },
    tabClick(ownerid) {
      this.$router.push(`/auditList/${ownerid}`);
    }
  }
};
</script>